<template>
	<view class="profile-container">
		<view class="user-info-section">
			<view class="user-avatar">
				<image 
					class="avatar-image" 
					:src="getAvatarUrl()" 
					mode="aspectFill"
				></image>
			</view>
			<view class="user-details">
				<text class="username">{{ userInfo.nickname || userInfo.username }}</text>
				<text class="user-id">ID: {{ userInfo.id }}</text>
			</view>
		</view>
		
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="goToUserInfo">
					<view class="menu-icon">👤</view>
					<text class="menu-text">个人信息</text>
					<view class="menu-arrow">></view>
				</view>
				<view class="menu-item" @click="goToAvatar">
					<view class="menu-icon">🖼️</view>
					<text class="menu-text">修改头像</text>
					<view class="menu-arrow">></view>
				</view>
				<view class="menu-item" @click="goToPassword">
					<view class="menu-icon">🔒</view>
					<text class="menu-text">修改密码</text>
					<view class="menu-arrow">></view>
				</view>
			</view>
			
			<view class="menu-group">
				<view class="menu-item" @click="goToAppointments">
					<view class="menu-icon">📅</view>
					<text class="menu-text">我的预约</text>
					<view class="menu-arrow">></view>
				</view>
				<view class="menu-item" @click="goToPatients">
					<view class="menu-icon">👥</view>
					<text class="menu-text">就诊人管理</text>
					<view class="menu-arrow">></view>
				</view>
				<view class="menu-item" @click="goToHealth">
					<view class="menu-icon">💊</view>
					<text class="menu-text">健康档案</text>
					<view class="menu-arrow">></view>
				</view>
			</view>
			
			<view class="menu-group">
				<view class="menu-item" @click="goToSettings">
					<view class="menu-icon">⚙️</view>
					<text class="menu-text">系统设置</text>
					<view class="menu-arrow">></view>
				</view>
				<view class="menu-item" @click="goToAbout">
					<view class="menu-icon">ℹ️</view>
					<text class="menu-text">关于我们</text>
					<view class="menu-arrow">></view>
				</view>
				<view class="menu-item" @click="goToFeedback">
					<view class="menu-icon">💬</view>
					<text class="menu-text">意见反馈</text>
					<view class="menu-arrow">></view>
				</view>
			</view>
		</view>
		
		<view class="logout-section">
			<button class="logout-btn" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {}
		}
	},
	
	onShow() {
		// 获取用户信息
		const userInfo = uni.getStorageSync('userInfo');
		if (userInfo) {
			this.userInfo = userInfo;
		}
	},
	
	methods: {
		getAvatarUrl() {
			if (this.userInfo.avatar) {
				return this.userInfo.avatar;
			}
			// 根据性别返回默认头像
			if (this.userInfo.gender === 1) {
				return '/static/images/mUser.png';
			} else if (this.userInfo.gender === 2) {
				return '/static/images/fUser.png';
			}
			// 默认使用男性头像
			return '/static/images/mUser.png';
		},
		
		goToUserInfo() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		
		goToAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0];
					this.uploadAvatar(tempFilePath);
				},
				fail: (err) => {
					console.error('选择图片失败:', err);
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		
		async uploadAvatar(filePath) {
			uni.showLoading({
				title: '上传中...'
			});
			
			try {
				const token = uni.getStorageSync('token');
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				
				const response = await uni.uploadFile({
					url: 'http://localhost:8080/user/uploadAvatar',
					filePath: filePath,
					name: 'avatar',
					header: {
						'Authorization': `Bearer ${token}`
					}
				});
				
				const result = JSON.parse(response.data);
				
				if (result.code === 200) {
					// 更新本地用户信息
					this.userInfo.avatar = result.data.avatarUrl;
					uni.setStorageSync('userInfo', this.userInfo);
					
					uni.showToast({
						title: '头像上传成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: result.message || '上传失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('上传头像失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},
		
		goToPassword() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		
		goToAppointments() {
			uni.navigateTo({
				url: '/pages/profile/my-appointments'
			});
		},
		
		goToPatients() {
			uni.navigateTo({
				url: '/pages/patient/patient'
			});
		},
		
		goToHealth() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		
		goToSettings() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		
		goToAbout() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		
		goToFeedback() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除本地存储
						uni.removeStorageSync('token');
						uni.removeStorageSync('userInfo');
						
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						});
						
						// 跳转到登录页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1500);
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.profile-container {
	min-height: 100vh;
	background: #f5f5f5;
}

.user-info-section {
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	padding: 60rpx 40rpx;
	display: flex;
	align-items: center;
	
	.user-avatar {
		margin-right: 30rpx;
		
		.avatar-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 4rpx solid rgba(255, 255, 255, 0.3);
		}
	}
	
	.user-details {
		flex: 1;
		
		.username {
			font-size: 36rpx;
			color: #ffffff;
			font-weight: bold;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.user-id {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
}

.menu-section {
	padding: 40rpx;
}

.menu-group {
	background: #ffffff;
	border-radius: 15rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background: #f8f9fa;
		}
		
		.menu-icon {
			font-size: 32rpx;
			margin-right: 20rpx;
		}
		
		.menu-text {
			flex: 1;
			font-size: 28rpx;
			color: #333333;
		}
		
		.menu-arrow {
			font-size: 24rpx;
			color: #999999;
		}
	}
}

.logout-section {
	padding: 40rpx;
	
	.logout-btn {
		width: 100%;
		height: 80rpx;
		background: #ff4757;
		color: #ffffff;
		border: none;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-weight: bold;
		
		&:active {
			opacity: 0.8;
		}
	}
}
</style> 